/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="serviceroute-planmenu">
    <el-menu @select="selectPlan">
      <el-menu-item
        :index="String(plan.id)"
        :ref="String(plan.id)"
        v-for="(plan, index) in planData"
        :key="index"
      >
        <span slot="title">{{ plan.name }}</span>
      </el-menu-item>
    </el-menu>
    <Messagebox
      :visible="deleteDiologVisible"
      :text="`${$t('openatc.greenwaveoptimize.isdelete')}${chooseName} ?`"
      @cancle="closeDeleteDialog"
      @ok="handleDelete"
    />
  </div>
</template>

<script>
import Messagebox from '../../components/MessageBox'
import { DeleteViproute } from '../../api/service'
import { getMessageByCode } from '../../utils/responseMessage'
export default {
  name: 'PlanMenu',
  components: {
    Messagebox
  },
  props: {
    planData: {
      type: Array
    },
    zIndexObj: {
      type: Object
    }
  },
  data () {
    return {
      bgColor: '#42daff',
      chooseId: 0, // 选中的计划id
      chooseName: '', // 选中的计划name
      deleteDiologVisible: false
    }
  },
  watch: {
    planData: {
      handler: function (val) {
        if (val) {
          let _this = this
          let index = 0
          if (this.chooseId > 0) {
            let ids = val.map(item => item.id)
            let _index = ids.indexOf(this.chooseId)
            index = _index > -1 ? _index : index
          }
          let id = val[index].id
          this.$nextTick(() => {
            let dom = _this.$refs[id][0].$el
            if (dom) {
              dom.click()
            }
          })
        }
        if (this.chooseId) {
          this.chooseName = this.planData.filter(ele => ele.id === this.chooseId)[0].name
        }
      },
      deep: true
    }
  },
  methods: {
    selectPlan (id) {
      // 选择某一方案
      this.chooseId = Number(id)
      this.chooseName = this.planData.filter(ele => ele.id === this.chooseId)[0].name
      this.$emit('chooseRoute', this.chooseId)
    },
    onDelete () {
      if (!this.chooseId) {
        this.$message({
          message: this.$t('openatc.dutyroute.nochooseplan'),
          type: 'warning'
        })
        return
      }
      this.deleteDiologVisible = true
    },
    handleDelete () {
      const route = this.planData.find(item => item.id === this.chooseId)
      DeleteViproute(this.chooseId).then(res => {
        if (!res.data.success) {
          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          return
        }
        this.deleteDiologVisible = false
        this.$message({
          message: this.$t('openatc.common.deletesuccess'),
          type: 'success',
          duration: 1 * 1000,
          onClose: () => {
            this.chooseId = 0
            this.$emit('research', route)
          }
        })
      })
    },
    resetChooseId () {
      // 重置为未选择状态
      this.chooseId = 0
      this.$emit('chooseRoute', this.chooseId)
    },
    closeDeleteDialog () {
      this.deleteDiologVisible = false
    },
    closeAddDialog () {
    }
  }
}
</script>
